<template>
	<div class="order-nav">
		<div class="p-nav">
            <div class="nav-item flex-item"  v-for="(item,idx) in choiseList"  
            :key='1' 
             @click="chageChoise(idx)" 
             :class='maskFalg && curSearchListIdx == idx ? "rotate":""'>
                <div class='nav-ps' v-if="idx == 0">（{{pageText.psMyjm}}）</div>
                <div class='nav-ps' v-if="idx == 1">（{{pageText.proType}}）</div>
                <div class='nav-ps' v-if="idx == 3">（{{pageText.psCoffee}}）</div>
                <span v-if='nameList'>{{nameList[idx]}}</span>
                <img src="../../static/images/down.png" class="nav-icon" >
                <span  v-if='idx != (choiseList.length-1)'  class='fg'>|</span>
            </div>		
		</div>
		<scroll-view class='sub-nav' :class=" maskFalg ?'in':'' " scroll-y >
           
            <div v-if="curSearchListIdx == idx" v-for="(item,idx) in choiseList" :key='idx'>
                <div v-for="(subitem,subidx) in item" :key="subidx">
                    <div class='sub-nav-item' v-if="subitem"   @click='getItem(subitem)' >{{subitem.name}}</div>
                </div>
            </div>
           
    	</scroll-view>
    	<div class='nav-mask' @click='closeMask'  v-if="maskFalg"></div>
	</div>
</template>
<script type="text/javascript">
	import Vue from 'vue'
	export default{
		props:[ 'choiseList','isDali'],
		data(){
			return{
				pageText :{
			        'psMyjm':'我的加盟商',
			        'proType':'产品类型',
			        'psCoffee':'咖啡机',
		        },
		        maskFalg:false,
		        curSearchListIdx : 0,
                init:false,
                nameList:[]
			}
		},
		mounted(){
			
		},
		methods:{
			closeMask(){
				this.maskFalg = false
			},
			chageChoise(idx){

				if(this.curSearchListIdx == idx){
					this.maskFalg = !this.maskFalg
				}else{
					this.maskFalg = true
				}
				this.curSearchListIdx = idx
		     },
             getItem(item){
                this.maskFalg = false;
                this.curItem = item;
                Vue.set(this.nameList,this.curSearchListIdx,item.name)
                this.$emit('chageData', item,this.curSearchListIdx)
             }
		},
		watch:{ 
            choiseList:{
                handler: function (newValue,oldValue) {
                    if( this.nameList.length == this.choiseList.length ){
                        for (let i = 0; i < newValue.length; i++) {
                            if(this.choiseList[i].length ){
                                if (oldValue[i] != newValue[i]) {
                                    this.nameList[i] = newValue[i][0].name
                                }
                            }
                            
                        }
                    }else{
                        var list = []
                        this.choiseList.forEach( (item ,idx)=>{
                            if(item.length){
                                var name = item[0].name;
                                list.push(name)
                            }
                        })
                        this.nameList = list;
                    }  　　　　　　 　　　　
                },
                deep: true
            }
		}

	}
</script>

<style>
.z3{
    position:absolute;
    z-index:3
}
.order-nav{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 26rpx;
    background: #fff;
    height: 80rpx;
    line-height: 80rpx;
    z-index: 3
}
.p-nav{
    display: flex;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 4;
    border-bottom: 2rpx solid #ececec;
    background: #fff;
}
.sub-nav{
    position: absolute;
    z-index: 2;
    left: 0;
    top: 80rpx;
    background: #fff;
    width: 100%;
    text-align: left;
    line-height: 80rpx;
    max-height: 420rpx;
    overflow: hidden;
    transition: 0.2s;
    transform: translate3d(0,-100%,0)
}
.sub-nav.in{
     transform: translate3d(0,0,0)
}
.sub-nav-item{                                                                          
    border-bottom: 2rpx solid #ededed;
    margin: 0 20rpx;
    padding-left: 20rpx;
    font-size: 26rpx;
   
}
.sub-nav-item:last-child{
    border: 0;
}
.nav-mask{
    position: fixed;
    top: 80rpx;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5)
}

.nav-item{
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   position: relative;
   flex: 1

}
.flex-item{
  flex: 1
}
.nav-item .fg{
    position: absolute;
    right: 0;top: -4rpx;
    color: #c2c2c2;
}

.nav-item .nav-icon{
    transition: 0.2s;
    width:20rpx;height:20rpx;
}
.nav-item.rotate{color:red;}

.nav-item.rotate .nav-icon{
    transform: rotate(180deg);
    color:red
}

.nav-item .nav-name{
    position: relative;
    padding-right: 20rpx;
}
.nav-item .nav-name .nav-icon{
    position: absolute;
    top: 30rpx;
    right: 20rpx;
    
}

</style>